<!DOCTYPE html>
<html lang="en">
<head>
<title>ajax异步请求</title>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css">

</style>
</head>
<body>
   
<h1>注册名字</h1>
   <a href="get.php" type="text" name="Name" id="btn" class="b">未审核</a><label id="tishi" style="display:none"></label>

</body>
</html>
<script type="text/javascript">

   //绑定失去焦点事件
    document.querySelector('#btn').onclick=function(){
      // 发送ajax请求到服务器
      //1.创建异步对象
      var ajax = new XMLHttpRequest();
      //2.设置请求的url等参数
      ajax.open('post','get.php');
      /*如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：*/
      ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
      // 3.发送请求
      ajax.send('Name='+document.querySelector('#btn'));

      // 4.注册事件
      ajax.onreadystatechange = function(){
        if (ajax.readyState ==4&&ajax.status==200) {
            // 5.在注册事件中接收返回的内容并修改数据
            console.log(ajax.responseText);
            var show = document.querySelector('#tishi');
                show.style.display='block';
            if (ajax.responseText =="exist") {

                show.innerHTML='该用户已经注册了！'

            } else{
                show.innerHTML='你可以使用该名字！'
            }
        }
      };

    }

    /*1.AJAX
      描述：ajax全称是asynchronos javascript and xml
            是一种手段
      说明：
            原生的ajax实现比较麻烦，需要借助于xmlHttpRequest对象来构建而今天我们使用的主题是jquery已经封装好的线程的方法     
      说明：
          （1）get无参请求：一般用来向后台获取数据使用，不会发送给后台如何内容
          （2）get带参请求：一般想贴吧，社区等需要根据页码或指定属性获取数据时使用。 这种情况瞎参数一般都比较小
          （3）post请求：一般用于登录，注册等保密性比较高的位置
    */



    // // 绑定点击事件onclick
    // document.querySelector('#btn').onclick= function(){
    //     // 发送ajax请求的5个步骤
    //     //1.创建异步对象
    //     var ajax = new XMLHttpRequest();

    //     //2.设置请求的url等参数
    //     /*参数1：请求的方法
    //     参数2：请求的url ，get提交的数据是直接追加在url后面的
    //     格式为xxx.php?xxx=xxx
    //     这里动态传递参数
    //     getAjax.php?content='+document.querySelector('.con').value
    //     */

    //     ajax.open('post','get.php?content='+document.querySelector('.con').value);
    //     //3.发送请求
    //     ajax.send();
    //     //4.注册事件
    //     ajax.onreadystatechange = function(){
    //         // 为了保证数据完整的回来，我们一般会判断两个值
    //         if (ajax.readyState ==4 && ajax.status==200) {
    //             // 如果能够进入这个判断，说明请求的页面存在，且返回数据
    //             //5.在注册事件中 获取返回的内容，并修改页面的显示
    //             // 数据是保存在异步对象的属性中
    //             console.log(ajax.responseText);
    //             document.querySelector('h1').innerHTML = ajax.responseText;
    //         };

    //     }

    // }
   
</script>
